<template>
  <div class="box">
    <div class="top"></div>
    <van-notice-bar left-icon="volume-o" text="无论我们能活多久，我们能够享受的只有无法分割的此刻，此外别无其他。" />
      <ul class="h-ul"> 
        <router-link to="/idcard">
          <li>身份信息
            <van-icon name="arrow" />
          </li>
        </router-link>
      </ul>
      <van-collapse v-model="activeNames">
        <van-collapse-item title="身高体重" name="1">
          <ul>
            <li>身高：<input type="text" /></li>
            <li>体重：<input type="text" /></li>
          </ul>
        </van-collapse-item>
        <van-collapse-item title="过敏源" name="2">
          <ul>
            <li>
              <input type="text" name="" id="" placeholder="请输入过敏源信息" />
            </li>
            <li><input type="text" name="" id="" placeholder="请输入过敏源信息"></li>
          </ul>
        </van-collapse-item>
        <van-collapse-item title="遗传病史" name="3">
          <ul>
            <li>
              <input type="text" name="" id="" placeholder="请输入遗传病病史" />
            </li>
            <li><input type="text" name="" id="" placeholder="请输入遗传病病史"></li>
          </ul>
        </van-collapse-item>
        <van-collapse-item title="病历" name="4">
          <ul>
            <li><input type="text" name="" id="" placeholder="请提交病历" /></li>
          </ul>
        </van-collapse-item>
      </van-collapse>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const activeNames = ref(['0']);
</script>

<style scoped lang="scss">
.box {
  background: url("../../public/images/login.png");
  background-size: cover;

  .top {
    height: 200px;
  }

  .h-ul {

    // background: #f0f8fe;
    li {
      height: 45px;
      border-top: 0.5px solid rgb(209, 208, 208, 0.5);
      line-height: 45px;
      font-size: 16px;
      position: relative;
      padding-left: 15px;

      // background: white;
      .van-icon {
        margin-top: 15px;
        position: absolute;
        right: 15px;
      }
    }
  }

  .van-collapse {
    .van-collapse-item {
      ul {
        li {
          height: 30px;

          input {
            border: none;
          }
        }
      }
    }
  }

  //   position: relative;
}
</style>
